    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>使用 XMLHttpRequest 对象发送 POST 请求</title>
        <script>
            function checkUsername() {
                // 创建 XMLHttpRequest 对象
                var xhr = new XMLHttpRequest();
                // 设置请求头
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 请求成功时的处理，将id为 result 的元素的内容设置为响应的文本数据
                        document.getElementById('result').innerHTML = xhr.responseText;
                        
                        // 如果响应的文本数据为用户名可用，将注册按钮设置为可用
                        if (xhr.responseText == '用户名可用') {
                            document.getElementById('regisBtn').disabled = false;       // 设置按钮可用
                            document.getElementById('result').style.color = 'green';    // 设置提示颜色为绿色
                        } else {
                            document.getElementById('regisBtn').disabled = true;        // 设置按钮不可用
                            document.getElementById('result').style.color = 'red';      // 设置提示颜色为红色
                        }
                    } else {
                        // 请求失败时的处理
                        document.getElementById('result').innerHTML = '请求失败';
                    }
                }
                // 发送请求
                xhr.open('POST', 'XHRServlet', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                var username = document.getElementById('username').value;
                xhr.send('todo=check&username=' + username);
            }

            function register() {
                // 创建 XMLHttpRequest 对象
                var xhr = new XMLHttpRequest();
                // 设置请求头
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 请求成功时的处理，将id为 result 的元素的内容设置为响应的文本数据
                        document.getElementById('result').innerHTML = xhr.responseText;
                    } else {
                        // 请求失败时的处理
                        document.getElementById('result').innerHTML = '请求失败';
                    }
                }
                // 发送请求
                xhr.open('POST', 'XHRServlet', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.send('todo=register');
            }
        </script>
    </head>
    <body>
        <h1>使用 XMLHttpRequest 对象发送 POST 请求</h1>
        <input type="text" id="username" onblur="checkUsername()" placeholder="请输入用户名">
        <button id="regisBtn" type="button" onclick="register()">注册</button>
        <div id="result"></div>
    </body>
    </html>